(function() {
    //获取元素节点
    var banner_ul = document.getElementById('banner-ul');
    var bannerEl = document.getElementById('banner');
    var olEl = document.getElementById('banner-ol');
    var olls = olEl.getElementsByTagName('li');
    //克隆第一张图片
    var clone_li = banner_ul.firstElementChild.cloneNode(true);
    //上树
    banner_ul.appendChild(clone_li);

    //序号
    var idx = 0;

    //定时器
    var timer;

    timer = setInterval(right, 2000);

    //运行图方法
    function right() {
        banner_ul.style.transition = 'transform .3s ease 0s';
        idx++;
        if(idx > 2) {
            setTimeout(() => {
                banner_ul.style.transition = 'none';
                banner_ul.style.transform = 'translateX(' + 0 * 25 + '%';
                idx = 0;
            }, 300);
        }
        banner_ul.style.transform = 'translateX(' + -idx * 25 + '%';
        setCircle();
    }
    //鼠标进入时
    bannerEl.addEventListener('mouseenter',function() {
        clearInterval(timer);
    },false)
    //鼠标离开时
    bannerEl.addEventListener('mouseleave',function() {
        clearInterval(timer);
        timer = setInterval(right, 2000);
    },false)

    //设置小圆点
    function setCircle() {
        //遍历小圆点
        for(var i=0;i<olls.length;i++) {
            if(i == idx%3) {//这里有小技巧
                olls[i].className = 'current';
            }else {
                olls[i].className = '';
            }
        }
    }
    //点击小圆点，事件委托
    olEl.addEventListener('click',function(e) {
        if(e.target.tagName.toLowerCase() == 'li') {
            //排他
            for(var i=0;i<olls.length;i++) {
                olls[i].className = '';
            }
            e.target.className = 'current';
            var n = e.target.getAttribute('data-n');
            idx = n;
            banner_ul.style.transform = 'translateX('+ -idx * 25 + '%';
        }
    },false) 
})()